<template>
  <nav class="main-menu">
    <div class="menu-header">
      <div class="logo">
        <img src="/logo.svg" alt="Chat App" class="logo-image" />
        <span class="logo-text">Chat App</span>
      </div>
    </div>

    <div class="menu-content">
      <div class="menu-section">
        <h3 class="section-title">主要功能</h3>
        <ul class="menu-list">
          <li class="menu-item">
            <router-link to="/chat" class="menu-link" :class="{ active: isActive('/chat') }">
              <i class="icon-chat"></i>
              <span class="link-text">聊天界面</span>
              <span class="link-badge">New</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/contacts" class="menu-link" :class="{ active: isActive('/contacts') }">
              <i class="icon-contacts"></i>
              <span class="link-text">联系人</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/history" class="menu-link" :class="{ active: isActive('/history') }">
              <i class="icon-history"></i>
              <span class="link-text">聊天记录</span>
            </router-link>
          </li>
        </ul>
      </div>

      <div class="menu-section">
        <h3 class="section-title">组件展示</h3>
        <ul class="menu-list">
          <li class="menu-item">
            <router-link to="/demo/layout" class="menu-link" :class="{ active: isActive('/demo/layout') }">
              <i class="icon-layout"></i>
              <span class="link-text">响应式布局</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/demo/components" class="menu-link" :class="{ active: isActive('/demo/components') }">
              <i class="icon-components"></i>
              <span class="link-text">UI 组件</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/demo/themes" class="menu-link" :class="{ active: isActive('/demo/themes') }">
              <i class="icon-palette"></i>
              <span class="link-text">主题系统</span>
            </router-link>
          </li>
        </ul>
      </div>

      <div class="menu-section">
        <h3 class="section-title">设置</h3>
        <ul class="menu-list">
          <li class="menu-item">
            <router-link to="/settings" class="menu-link" :class="{ active: isActive('/settings') }">
              <i class="icon-settings"></i>
              <span class="link-text">系统设置</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/profile" class="menu-link" :class="{ active: isActive('/profile') }">
              <i class="icon-user"></i>
              <span class="link-text">个人资料</span>
            </router-link>
          </li>
        </ul>
      </div>
    </div>

    <div class="menu-footer">
      <div class="user-info">
        <div class="user-avatar">
          <img src="/default-avatar.png" alt="User" />
        </div>
        <div class="user-details">
          <span class="user-name">演示用户</span>
          <span class="user-status">在线</span>
        </div>
      </div>
      
      <div class="menu-actions">
        <button @click="toggleTheme" class="action-btn" title="切换主题">
          <i :class="isDark ? 'icon-sun' : 'icon-moon'"></i>
        </button>
        <button @click="openSettings" class="action-btn" title="设置">
          <i class="icon-settings"></i>
        </button>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUIStore } from '@/stores/ui'

const route = useRoute()
const router = useRouter()
const uiStore = useUIStore()

const isDark = computed(() => uiStore.theme === 'dark')

const isActive = (path: string): boolean => {
  return route.path.startsWith(path)
}

const toggleTheme = () => {
  uiStore.toggleTheme()
}

const openSettings = () => {
  router.push('/settings')
}
</script>

<style scoped>
.main-menu {
  width: 280px;
  height: 100vh;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.menu-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.logo-image {
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-md);
}

.logo-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.menu-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg) 0;
}

.menu-section {
  margin-bottom: var(--spacing-xl);
}

.section-title {
  margin: 0 0 var(--spacing-md) 0;
  padding: 0 var(--spacing-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  margin-bottom: var(--spacing-xs);
}

.menu-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
  position: relative;
}

.menu-link:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.menu-link.active {
  background: var(--color-primary-alpha);
  color: var(--color-primary);
}

.menu-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
}

.menu-link i {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.link-text {
  flex: 1;
}

.link-badge {
  padding: 2px 6px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  border-radius: var(--border-radius-full);
  font-weight: var(--font-weight-medium);
}

.menu-footer {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.user-status {
  font-size: var(--font-size-xs);
  color: var(--color-success);
}

.menu-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.action-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.action-btn:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

/* 图标样式 */
.icon-chat::before { content: '💬'; }
.icon-contacts::before { content: '👥'; }
.icon-history::before { content: '📋'; }
.icon-layout::before { content: '📐'; }
.icon-components::before { content: '🧩'; }
.icon-palette::before { content: '🎨'; }
.icon-settings::before { content: '⚙️'; }
.icon-user::before { content: '👤'; }
.icon-sun::before { content: '☀️'; }
.icon-moon::before { content: '🌙'; }

/* 滚动条样式 */
.menu-content::-webkit-scrollbar {
  width: 4px;
}

.menu-content::-webkit-scrollbar-track {
  background: transparent;
}

.menu-content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

.menu-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-menu {
    width: 100%;
    max-width: 280px;
  }
}
</style>